<template>
    <div class="sidebar">
        <el-menu
                class="sidebar-el-menu"
                :default-active="onRoutes"
                :collapse="sidebar.collapse"
                background-color="#324157"
                text-color="#bfcbd9"
                active-text-color="#20a0ff"
                unique-opened
                router
                v-loading="loading"
        >
            <template v-for="item in items">
                <template v-if="item.subs">
                    <el-sub-menu :index="item.index" :key="item.index">
                        <template #title>
                            <el-icon>
                                <component :is="item.icon"></component>
                            </el-icon>
                            <span>{{ item.title }}</span>
                        </template>
                        <template v-for="subItem in item.subs">
                            <el-sub-menu
                                    v-if="subItem.subs"
                                    :index="subItem.index"
                                    :key="subItem.index"
                            >
                                <template #title>{{ subItem.title }}</template>
                                <el-menu-item v-for="(threeItem, i) in subItem.subs" :key="i" :index="threeItem.index">
                                    {{ threeItem.title }}
                                </el-menu-item>
                            </el-sub-menu>
                            <el-menu-item v-else :index="subItem.index">
                                {{ subItem.title }}
                            </el-menu-item>
                        </template>
                    </el-sub-menu>
                </template>
                <template v-else>
                    <el-menu-item :index="item.index" :key="item.index">
                        <el-icon>
                            <component :is="item.icon"></component>
                        </el-icon>
                        <template #title>{{ item.title }}</template>
                    </el-menu-item>
                </template>
            </template>
        </el-menu>
    </div>
</template>

<script setup lang="ts">
    import {computed, ref} from 'vue';
    import {useSidebarStore} from '../store/sidebar';
    import {useRoute} from 'vue-router';

    const loading = ref(true);
    const items = ref([
        {
            icon: 'Present',
            index: '/receiveOrder',
            title: '我的收件',
        },
        {
            icon: 'Box',
            index: '/sendOrder',
            title: '我的寄件',
        },
        {
            icon: 'Position',
            index: '/sendExpress',
            title: '寄件',
        },
        {
            icon: 'Notebook',
            index: '/addressBook',
            title: '我的地址簿',
        },
    ]);
    // 用户菜单
    const userMenus = [
        {
            icon: 'Present',
            index: '/receiveOrder',
            title: '我的收件',
        },
        {
            icon: 'Box',
            index: '/sendOrder',
            title: '我的寄件',
        },
        {
            icon: 'Position',
            index: '/sendExpress',
            title: '寄件',
        },
        {
            icon: 'Notebook',
            index: '/addressBook',
            title: '我的地址簿',
        },
    ];
    // 系统管理员菜单
    const managerMenus = [
        {
            icon: 'Histogram',
            index: '/index',
            title: '数据大屏',
        },
        {
            icon: 'User',
            index: '/webUser',
            title: '用户管理',
        },
        {
            icon: 'Present',
            index: '/order',
            title: '快递管理',
        },
        {
            icon: 'Shop',
            index: '/outlet',
            title: '网点管理',
        },
        {
            icon: 'Star',
            index: '/type',
            title: '快递类型管理',
        },
        {
            icon: 'CopyDocument',
            index: '/sysLog',
            title: '操作日志',
        },
    ];
    // 快递员菜单
    const courierMenus = [
        {
            icon: 'Bicycle',
            index: '/takeOrder',
            title: '揽件任务',
        },
        {
            icon: 'Present',
            index: '/deliveryOrder',
            title: '派件任务',
        }
    ];
    // 网点管理员菜单
    const outletMenus = [
        {
            icon: 'Histogram',
            index: '/index',
            title: '数据大屏',
        },
        {
            icon: 'Document',
            index: '/order',
            title: '快递管理',
        },
        {
            icon: 'User',
            index: '/courier',
            title: '快递员管理',
        }
    ];
    const role = localStorage.getItem('role');
    if (role == '1') {
        items.value = courierMenus;
    } else if (role == '2') {
        items.value = outletMenus;
    } else if (role == '3') {
        items.value = managerMenus;
    } else {
        items.value = userMenus;
    }
    loading.value = false;

    const route = useRoute();
    const onRoutes = computed(() => {
        return route.path;
    });

    const sidebar = useSidebarStore();
</script>

<style scoped>
    .sidebar {
        display: block;
        position: absolute;
        left: 0;
        top: 70px;
        bottom: 0;
        overflow-y: scroll;
    }

    .sidebar::-webkit-scrollbar {
        width: 0;
    }

    .sidebar-el-menu:not(.el-menu--collapse) {
        width: 250px;
    }

    .sidebar > ul {
        height: 100%;
    }
</style>
